<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="google-translate-customization" content="2799b63e9872a422-144b0a71179bc4c5-gbc0bb0558eb2f07b-f"></meta>
    <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
    {% if page.description %}
    <meta name="description" content="{{ page.description }}">
    {% endif %}
    <link rel="stylesheet" href="/css/master.css">
    {% if site.feedburner %}
    <link href="http://feeds.feedburner.com/{{ site.feedburner.id }}" rel="alternate" title="{{ site.title }}" type="application/atom+xml">
    {% else %}
    <link href="/atom.xml" rel="alternate" title="{{ site.title }}" type="application/atom+xml">
    {% endif %}
    {% if site.google_analytics %}
    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '{{ site.google_analytics.account }}']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    {% endif %}
  </head>
  <body>
    <svg style="display: none;">
      <symbol id="icon-github" viewBox="0 0 32 32" fill="currentColor">
        <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z "></path>
      </symbol>
    </svg>


    <header role="banner" class="banner">
      <a id="skip-navigation" class="screen-reader-text" href="#content">Skip Navigation</a>

      <nav role="navigation" class="row">
          <ul class="nav">
            <li class="logo"><a class="home-logo-link" href="/">
              <!-- We'll need to update the image color after colors have been finalized. Right now the IE8 logo image is white.-->
              <!--[if lte IE 8]><img src="/img/logo.png" class="oldie-logo-navbar icon-logo" alt=""><![endif]-->
              <!--[if gte IE 9]><!-->
              <svg class="icon-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="-3627 353 1024 1024" style="enable-background:new -3627 353 1024 1024;" xml:space="preserve">
                <path d="M-3116.4 353c-282 0-510.6 228.6-510.6 510.6s228.6 510.6 510.6 510.6s510.6-228.6 510.6-510.6S-2834.4 353-3116.4 353z M-3124.1 454.4c36.6 0 66.2 29.6 66.2 65.9c0 36.6-29.6 66.2-66.2 66.2c-36.3 0-65.9-29.6-65.9-66.2 C-3190.1 484-3160.5 454.4-3124.1 454.4L-3124.1 454.4z M-2838 667.7l-196.4 24.8l0.1 196.6l95.2 317.7c5 20.1-7 40.1-26.9 45.1 c-19.8 5-40.1-6-45.1-26l-97.5-289.2h-30l-89.7 295.2c-7.5 19.3-29 28.1-48.2 20.6c-19.1-7.4-30.7-29.1-23.2-48.4l82.4-311.8V692.5 l-181-24.6c-18.6-1.5-31.2-17.8-29.7-36.4c1.4-18.7 18.3-32.6 36.8-31.1l219.9 18.9h96.4l234.1-19.3c18.6-0.7 34.4 13.7 35 32.5 C-2805 651-2819.4 666.9-2838 667.7L-2838 667.7z"/>
              </svg>
              <!--<![endif]-->The A11Y Project
              </a>
            </li>
            <li><a href="/patterns/">Patterns</a></li>
            <li><a href="/checklist.html">Checklist</a></li>
            <li><a href="/resources.html">Resources</a></li>
            <li><a href="/about.html">About</a></li>
          </ul>
      </nav>
    </header>

    <main role="main" id="content" class="section" tabindex="0">
    {{ content }}
    </main>

    <footer role="contentinfo" class="section footer">
      <div class="row">
        <div class="join-us">
          <h3 class="join-us-title">Join us on <a href="https://github.com/a11yproject/a11yproject.com">GitHub</a></h3>
          <ul class="join-us-buttons github-data inline-list">
            <li><a class="join-us-btn" href="https://github.com/a11yproject/a11yproject.com/graphs/contributors"><span class="data contributors">&nbsp;</span>Contributors</a></li>
            <li><a class="join-us-btn" href="https://github.com/a11yproject/a11yproject.com"><span class="data stars">&nbsp;</span>Stars</a></li>
            <li><a class="join-us-btn" href="https://github.com/a11yproject/a11yproject.com/issues"><span class="data open-issues">&nbsp;</span>Open Issues</a></li>
          </ul>

          <ul id="contributors-list" class="row"></ul>
          <ul class="pager contributors-pagination inline-list"></ul>
        </div>

        <div class="colophon">

          <h5 class="screen-reader-text">Colophon</h5>
          <p><a href="https://twitter.com/A11YProject">@A11YProject</a> | <a href="/atom.xml">Subscribe</a></p>
          <div id="google_translate_element"></div>

          <p class="notice">Notice an issue or want to help? <a href="http://github.com/a11yproject/a11yproject.com">Please contribute</a>.</p>

          <p>&copy; <span class="a11y-copyright"></span> The Accessibility Project<br />
            Powered by <a href="https://github.com/mojombo/jekyll">Jekyll</a></p>
        </div>
      </div>

    </footer>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/garlic.js/1.2.2/garlic.min.js"></script>
    <script src="/js/jquery.waypoints.min.js"></script>

    <script src="/js/scripts.js"></script>
    <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </body>
</html>
